<template>
	<view class="container-vnode"
		style="background: url(/static/imgbgc.png) no-repeat; background-size: 100% 100%;height: 100%;">
		<view class="main">
			<view class="income">
				<view class="income-item flex">
					<view class="lt">
						<image src="@/static/index/coins.png" mode=""></image>
					</view>
					<view class="rt">
						<view class="title">昨日获得</view>
						<view class="num">{{dayincome}}</view>
					</view>
				</view>
				<view class="income-item flex">
					<view class="lt">
						<image src="@/static/index/coins.png" mode=""></image>
					</view>
					<view class="rt">
						<view class="title">{{$t('vnode.name2')}}</view>
						<view class="num">{{totalincome}}</view>
					</view>
				</view>
			</view>
			<scroll-view :style="`height:${scrollheight}px`" scroll-y="true">
				<!-- <view class="box" v-if='Product.length==0'>
					<view class="machine">
						<view class="svga">
							<view class="content" style="height: 610rpx">
								<l-svga src="/static/vnode.svga"></l-svga>
							</view>
						</view>
						<image :src="image1" mode=""></image>
						<view class="num">{{Product.name}}</view>
					</view>
					<view class="button" @tap="$fun.jump('/pageC/robot/robot')" style="position: relative;">
						<image src="@/static/button.png" mode=""></image>
						<view class="button-text">
							{{$t('vnode.name14')}}
						</view>
					</view>
				</view> -->
				<view class="facilitylist" v-for="(item,index) in Product" :key="index">
					<view class="facilitylist_top flex-between">
						<view class="flex">
							<image :src="$fun.imgUrl(item.image)" mode=""></image>
							<view class="">
								<view class="status" style="width: 380rpx;">
									<view class="btns1" v-if="item.status==1">在线</view>
									<view class="btns1 btns2" v-if="item.status==0">离线</view>
									<u--text size='14' color='#fff' :lines="1" :text="item.name"></u--text>
								</view>
								<view class="" style="font-weight: 400;font-size: 22rpx;color: #fff;margin-top: 14rpx;">
									月化:{{item.release}}%</view>
								<!-- <view class="" style="font-weight: 400;font-size: 22rpx;color: #333333;margin-top: 14rpx;">
								数量：{{item.num}}台&nbsp;&nbsp;总收益：{{item.total_income}}&nbsp;&nbsp;昨日收益：{{item.yestoday_income}}
							</view> -->
							</view>
						</view>
						<view class="fugou" @click="$fun.jump(`/pageC/robot/robot?id=${item.pro_id}&type=1`)">复购</view>

					</view>
					<view class="line"></view>
					<view class="facilitylist_bottom" style="display: block;padding-bottom: 0;">
						<view class="right_top">
							<view class="">分润进度</view>
						</view>
						<u-line-progress :percentage="item.schedule" height='16' inactiveColor='#c4e8fe'
							activeColor="#23b2ff"></u-line-progress>
						<view class="right_bottom">
							<view class="text">{{item.balance}}</view>
							<view class="">{{item.amount}}</view>
						</view>
					</view>
				</view>
				<noneDate style="height: 70%;" v-if="Product.length==0" />
				<!-- <view class="" style="height: 70%;position: relative;" v-for="(item,index) in Product" :key="index">
					<view class="release">
						<view class="release-text">
							{{$t('vnode.name3')}}
						</view>
						<u-line-progress :percentage="getRelease" activeColor="#23b2ff"></u-line-progress>
						<view class="flex-between" style="font-size: 20rpx;color: rgba(255, 255, 255, 0.6);">
							<view style="color: #23b2ff;">
								{{(item.amount - item.balance).toFixed(2)}}
							</view>
							<view class="">
								{{item.amount}}
							</view>
						</view>
					</view>
					<view class="box">
						<view class="machine">
							<view class="svga">
								<view class="content" style="height: 610rpx">
									<l-svga src="/static/vnode.svga"></l-svga>
								</view>
							</view>
							<image :src="$fun.imgUrl(item.image)" mode=""></image>
							<view class="num">{{item.name}}</view>
						</view>
						<view class="button" @tap="$fun.jump('/pageC/robot/robot')" style="position: relative;">
							<image src="@/static/button.png" mode=""></image>
							<view class="button-text">
								{{$t('vnode.name14')}}
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</view>
		<u-popup :show="isPopup" @close="closePopup" @open="openPopup" mode="bottom" :round="10" closeable>
			<view class="electric-box">
				<view class="title">{{$t('vnode.name5')}}</view>
				<view class="duration">
					<view class="title">{{$t('vnode.name6')}}</view>
					<u-radio-group v-model="radiovalue1" placement="column" @change="handleChange">
						<view class="duration-box flex-between">
							<view class="duration-item" v-for="(item,index) in electricityList" :key="item.id">
								<view class="lt">
									<view class="day">
										{{item.name}}
									</view>
									<view class="money">
										{{item.money}}
									</view>
								</view>
								<view class="rt">
									<u-radio size="14" activeColor="#ff4100" :name="item.id"></u-radio>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<view class="select-currency">
					<view class="title">{{$t('vnode.name7')}}</view>
					<view class="input flex-between" @tap="isSheet = true">
						<view class="" :style="{color:selectValue.name? '#000':'#999'}">
							{{ selectValue.name || $t('vnode.name8')}}
						</view>
						<view class="">
							<u-icon name="arrow-down-fill" color="#999999" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="">
					<u-button type="primary" :text="$t('vnode.name9')" shape="circle" color="#00A3FF"
						:customStyle="{color:'#000'}" @click="handlePay"></u-button>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :actions="payInfo" :title="title" :show="isSheet" @close="isSheet = false"
			:cancelText="$t('vnode.name10')" safeAreaInsetBottom @select="handleSelect"></u-action-sheet>
		<pay-board ref="payJP" :showBoard="showBoard" :priceText="money+''" @complete="complete"
			@closeBorad="handleModel" :bottom="150"></pay-board>
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import PayBoard from '@/components/xiaojia-keyBoard/xiaojia-keyBoard.vue'
	import image1 from '@/static/vnode/machine.png'
	export default {
		components: {
			PayBoard
		},
		data() {
			return {
				image1: image1,
				currency: null,
				radiovalue1: 1,
				isSheet: false,
				isPopup: false,
				title: this.$t('vnode.name13'),
				electricityList: [],
				Product: [],
				payInfo: [],
				dayincome: '',
				totalincome: '',
				selectValue: {},
				time: new Date().getTime(),
				money: 0,
				showBoard: false,
				zIndex: -1,
				scrollheight: 0
			};
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			let statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 85 - statusBarHeight - 95
		},
		onShow() {
			this.getProduct()
		},
		computed: {
			getRelease() {
				if (this.Product) {
					const num = ((this.Product.amount - this.Product.balance) / this.Product.amount) * 100
					return num.toFixed(2)
				}

			},
			getTime() {
				if (this.Product) {
					const data = ((this.Product.end_time * 1000) - new Date().getTime()) / ((this.Product.end_time - this
						.Product.createtime) * 1000)
					return (data * 100).toFixed(2)
				}

			}
		},
		methods: {
			handleChange(e) {
				const val = this.electricityList.find(item => item.id == e)
				this.money = val.money
			},
			handleModel() {
				this.zIndex = -1
				this.showBoard = !this.showBoard
			},
			complete(pass) {
				this.showBoard = false
				this.pay(pass)
			},
			async pay(pass) {
				const params = {
					id: this.Product.id,
					pay_id: this.selectValue.id,
					e_id: this.radiovalue1,
					pay: pass
				}
				this.$fun.showLoading()
				const res = await this.$fun.ajax.post('product/electricity', params)
				uni.hideLoading()
				this.$fun.msg(res.msg)
				if (res.code) {
					setTimeout(() => {
						this.isPopup = false
						this.$fun.jump('/pages/vnode/vnode', 3)
					}, 500)

				}
			},
			async handlePay() {
				if (!this.radiovalue1) return this.$fun.msg(this.$t('vnode.name11'))
				if (!this.selectValue.id) return this.$fun.msg(this.$t('vnode.name12'))
				this.isPopup = false
				this.showBoard = true
			},
			handleSelect(e) {
				this.selectValue = e
			},
			// 获取支付信息
			async getpayInfo() {
				const res = await this.$fun.ajax.post('product/payInfo', {
					type: '2'
				})
				this.payInfo = res.data
			},
			// 获取我的机器人
			async getProduct() {
				const res = await this.$fun.ajax.post('product/userProduct')
				res.data.info.map((item) => {
					item.release = item.release * 100
					if (item) {
						const num = ((item.amount - item.balance) / item.amount) * 100
						item.schedule = num.toFixed(2)
					}

				})
				this.Product = res.data.info
				this.dayincome = res.data.dayincome
				this.totalincome = res.data.totalincome
			},
			handleMachine() {
				if (this.getTime > 20) return
				this.isPopup = true
				this.getElectricityList()
				this.getpayInfo()
			},
			// 充电列表
			async getElectricityList() {
				const res = await this.$fun.ajax.post('product/electricityList')
				this.electricityList = res.data
				this.money = this.electricityList[0].money
			},
			closePopup() {
				this.isPopup = false
			},
			openPopup() {

			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container-vnode {
		height: 100%;

		::v-deep .u-line-progress {
			overflow: inherit;
		}

		.svga {
			.content {
				width: 1200rpx;
				height: 500rpx;
				position: absolute;
				top: 8%;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
			}
		}

		.electric-box {
			height: 650rpx;
			padding: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #232323;
			}

			.select-currency {
				margin: 40rpx 0;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #232323;
					line-height: 24rpx;
					margin-bottom: 20rpx;
				}

				.input {
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1rpx solid #999999;
					padding: 0 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					// color: #999999;
					line-height: 24rpx;
				}
			}

			.duration {
				margin: 40rpx 0;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #232323;
					line-height: 24rpx;
					margin-bottom: 20rpx;
				}

				.duration-box {
					flex-wrap: wrap;

					.duration-item {
						width: 150rpx;
						height: 90rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1rpx solid #999999;
						display: flex;
						justify-content: space-between;
						margin: 10rpx 0;

						.lt {
							padding: 10rpx 5rpx;

							.day {
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 24rpx;
								color: #19181A;
								line-height: 38rpx;
							}

							.money {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #19181A;
								line-height: 20rpx;
								text-align: center;

							}
						}

						.rt {
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.main {
			height: 100%;
			padding: 30rpx 0;

			.release {

				width: 250rpx;
				margin: 0 auto;

				.release-text {
					font-size: 24rpx;
					margin-bottom: 10rpx;
					color: rgba(255, 255, 255, 0.6);
				}
			}

			.income {
				display: inline-block;
				margin-top: 30rpx;

				.income-item {
					padding: 10rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
					border-left: 10rpx solid #fff;
					border-radius: 5rpx;
					margin: 10rpx 0;

					.lt {
						width: 30rpx;
						height: 30rpx;
					}

					.rt {
						margin-left: 10rpx;

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: rgba(255, 255, 255, 0.6);
							line-height: 23rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.num {
							font-family: DIN, DIN;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFC024;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

					}
				}
			}

			.box {
				position: absolute;
				bottom: 20%;
				left: 0;
				right: 0;

				.machine {
					position: relative;
					margin: 0 auto;
					width: 750rpx;
					height: 678rpx;

					.electric {
						position: absolute;
						top: 50rpx;
						left: 50%;
						transform: translate(-50%);
						z-index: 9999;

						.line {
							width: 350rpx;
						}

						.img {
							width: 87rpx;
							height: 87rpx;
							position: absolute;
							left: 70%;
							top: -20rpx;
						}

						.ele-text {
							position: absolute;
							left: 50%;
							top: -80rpx;
							background-color: #fff;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #00A3FF;
							line-height: 28rpx;
							display: inline-block;
							width: 250rpx;
							height: 52rpx;
							line-height: 52rpx;
							border: 1rpx solid #00A3FF;
							text-align: center;

							&:before {
								content: '';
								border: 15rpx solid #00A3FF;
								border-color: #00A3FF transparent transparent transparent;
								position: absolute;
								bottom: -30rpx;
								left: 30%;
							}
						}
					}

					.num {
						position: absolute;
						left: 50%;
						bottom: 3%;
						transform: translateX(-45%);
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 38rpx;
						text-align: center;
					}

				}

				.button {
					width: 360rpx;
					height: 128rpx;
					margin: 20rpx auto;

					.button-text {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: #fff;
						font-weight: 700;
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.facilitylist {
		width: 710rpx;
		// height: 183rpx;
		background: rgba(68, 78, 99, 0.7);
		border-radius: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		margin: 30rpx auto 0;
		padding-bottom: 20rpx;


		.flex {
			display: flex;
		}

		&_top {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding: 27rpx 30rpx 22rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.fugou {
				width: 120rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: #fff;
				background-color: #00A3FF;
				font-size: 20rpx;
				border-radius: 10rpx;
			}

			.node_type {
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				width: 112rpx;
				height: 34rpx;
				background: #FF0000;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				text-align: center;
				line-height: 34rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}

			.status {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				display: flex;
				margin-top: 12rpx;

				.onLine {
					width: 56rpx;
					height: 32rpx;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
					background: #5BBE73;
				}

				.onLine1 {
					background: #426EF6;
				}

				.onLine2 {
					background: #E86E52;
				}

				.btn {
					width: 74rpx;
					height: 32rpx;
					background: #426EF6;
					border-radius: 4rpx;
					line-height: 30rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btn1 {
					background: #FF9C6A;
				}

				.btn2 {
					background: #9C42F6;
				}

				.btn3 {
					background: #5BBE73;
				}

				.btn4 {
					background: #42BAF6;
				}

				.btn5 {
					background: #A9A9A9;
				}

				.btns1 {
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					width: 74rpx;
					height: 32rpx;
					background: #5BBE73;
					border-radius: 4rpx;
					line-height: 30rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btns2 {
					background: #A9A9A9;
				}
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				display: flex;

				image {
					width: 64rpx;
					height: 64rpx;
					margin: -27rpx 0 0;
				}
			}
		}

		&_bottom {
			display: flex;
			padding: 20rpx 20rpx;
			justify-content: space-between;

			.box {
				width: 33%;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.num {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.right_top {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 10rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #fff;
			}

			.right_bottom {
				font-size: 22rpx;
				color: #fff;
				display: flex;
				justify-content: space-between;
				margin-top: 6rpx;
				font-weight: 500;

				.text {
					color: #5990FF;
				}
			}
		}

		.line {
			width: 710rpx;
			height: 2rpx;
			background: #EAEAEA;
		}

		.adjustment {
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 20rpx 0;

			.btn1 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
			}

			.btn2 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #5990FF;
				border-radius: 32rpx;
				color: #FFFFFF;
			}

			.btn3 {
				width: 670rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}
</style>